📱 UI/UX Case Study

FinFlow — Mobile Banking Reimagined

A comprehensive Figma case study exploring how design thinking can transform financial anxiety into financial confidence.

Role
UI/UX Designer
Duration
3 Weeks
Tools
Figma, FigJam
Deliverables
40+ Screens

Young professionals want control, but banking apps create anxiety.

Traditional banking apps overwhelm users with data while providing little insight. They feel corporate, cold, and make managing money stressful instead of empowering.

72%
Check balance multiple times daily, often from spending anxiety
64%
Struggle to identify transactions due to cryptic merchant names
81%
Want to save more but lack visual progress motivation
7 taps
Average required to send money on existing apps

Understanding our users

Three distinct personas emerged from our research, each with unique needs but a shared desire for financial clarity.

M

Maya Chen

The Ambitious Saver

Age 26
Occupation Marketing Manager
Income $72,000/year

Goals: Save $15K for a down payment, build emergency fund, understand spending

"I want my banking app to be my financial coach, not just a transaction log."

J

James Roberts

The Busy Professional

Age 32
Occupation Software Engineer
Income $145,000/year

Goals: Minimize time on finance admin, automate everything, quick transfers

"Just tell me if something's wrong. Otherwise, stay out of my way."

P

Priya Patel

The Financial Newbie

Age 23
Occupation Junior Designer
Income $48,000/year

Goals: Learn budgeting, stop paycheck-to-paycheck living, build credit

"I wish my bank would teach me, not judge me."

Mapping Maya's savings goal experience

Awareness
🤔

Action: Sees savings feature

Thought: "Can this help me save?"

Opportunity: Onboarding prompt

Consideration
😊

Action: Explores goal options

Thought: "What kind of goals can I set?"

Opportunity: Pre-built templates

Setup
😰

Action: Creates goal

Thought: "How much should I save?"

Opportunity: Smart calculator

Tracking
😌

Action: Checks progress

Thought: "Am I on track?"

Opportunity: Visual progress

Celebration
🎉

Action: Hits milestone

Thought: "I'm doing it!"

Opportunity: Confetti animation

Building a consistent foundation

Color Palette

Primary
#6366F1
Success
#14B8A6
Warning
#F59E0B
Error
#EF4444
BG Dark
#0F172A
Text Light
#F8FAFC

Typography Scale

Display / 32px $4,235.67
Heading / 20px Available Balance
Body / 16px You spent $342 less than last month.
Caption / 12px Last updated 2 minutes ago

40+ screens across key flows

From onboarding to goal completion, every screen was designed with clarity and delight in mind.

Home
Dashboard
Home
Send
Money
Send
Goals
Progress
Goals
Spending
Insights
Insights
Transaction
Detail
Transaction
Card
Management
Cards
Goal
Complete 🎉
Celebration
Dark
Mode
Dark Mode

Design decisions that solve problems

💰

Contextual Balance

Balance displayed with spending context ("$342 less than last month") reduces anxiety and provides immediate value.

3-Tap Transfers

Reduced from industry average of 7 taps. Recent contacts surface first, smart defaults minimize input.

🎯

Visual Goal Progress

Progress rings with milestone celebrations (confetti at 25%, 50%, 75%, 100%) maintain motivation.

🏷️

Smart Categorization

AI cleans cryptic merchant names ("POS DEBIT 4829183") into readable labels ("Starbucks Coffee").

🔔

Smart Notifications

Granular controls let users choose what matters. Contextual alerts only for unusual activity.

🌙

True Dark Mode

Not just inverted colors — thoughtfully redesigned elevation, contrast, and visual hierarchy.

Key takeaways from this project

🔬

Research Is Never Wasted

Every hour in user interviews saved days of iteration. Understanding balance anxiety led to features I never would have considered.

🧱

Design Systems Scale

Building components upfront took extra time but made creating 40+ screens dramatically faster. Changes propagated instantly.

Micro-Interactions Matter

The confetti on goal milestones took 30 minutes to design but creates disproportionate delight. Small moments build loyalty.

Accessibility Is Design

WCAG compliance isn't a checkbox — it improves usability for everyone. Contrast and touch targets benefit all users.